import React, { useState } from "react";
import echarts from "echarts";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import config from "src/config";

const VerticalHistogramChart = ({
  title = "数据展示",
  name = "",
  data = []
}) => {

  const [theme, changeTheme] = useState("walden");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };

  const getOption = data => {
    const color = data.map(
      () =>
        "rgb(" +
        [
          Math.round(Math.random() * 255),
          Math.round(Math.random() * 255),
          Math.round(Math.random() * 255)
        ].join(",")
    );
    const lineY = [];
    const cityList = data.map(item => item.title);
    const cityData = data.map(item => parseInt(item.hot));
    for (var i = 0; i < cityList.length; i++) {
      var x = i;
      if (x > color.length - 1) {
        x = color.length - 1;
      }
      var tempData = {
        name: cityList[i],
        color: color[x] + ")",
        value: cityData[i],
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: color[x] + ", 0.3)"
                },
                {
                  offset: 1,
                  color: color[x] + ", 1)"
                }
              ],
              false
            ),
            barBorderRadius: 10
          },
          emphasis: {
            shadowBlur: 15,
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        }
      };
      lineY.push(tempData);
    }

    return {
      title: {
        show: false
      },
      tooltip: {
        trigger: "item"
      },
      toolbox: {
        feature: {
            magicType: {
                type: ['line', 'bar']
            },
            saveAsImage: {
                show: true,
                name: title,
                pixelRatio: 2
            },
            dataView:{
                
            },
            restore:{}
        }
      },
      grid: {
        borderWidth: 0,
        top: "60px",
        left: "5%",
        right: "15%",
        bottom: "3%"
      },
      color: color,
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            inside: false
          },
          data: cityList
        },
        {
          type: "category",
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: "#757575",
              fontSize: "14",
              fontFamily: "PingFangSC-Regular"
            },
            formatter: function(val) {
              return val;
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: cityData
        }
      ],
      xAxis: {
        type: "value",
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      series: [
        {
          name: name,
          type: "bar",
          zlevel: 2,
          barWidth: "10px",
          data: lineY,
          animationDuration: 1500,
          label: {
            normal: {
              color: "#757575",
              show: true,
              position: [0, "-24px"],
              textStyle: {
                fontSize: 16
              },
              formatter: function(a, b) {
                return a.name;
              }
            }
          }
        }
      ],
      animationEasing: "cubicOut"
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="切换主题">
      <ReactEcharts option={getOption(data)} />
    </ChartsWrap>
  );
};

export default VerticalHistogramChart;
